.menu-sm {
  position: fixed;
  bottom: 0;
  left: -$theme-menu-width-sm;
  width: $theme-menu-width-sm;
  max-height: 100%;

  &.shift {
    left: 0;
  }
}

.sidebar-wrap {
  top: 0;

  @extend .menu-sm;

  .sidebar > :last-child {
    margin-bottom: 5em;
  }
}

.addons-wrap {
  @extend .menu-sm;
}

.content-wrap {
  &.shift {
    position: fixed;
    top: 0;
    bottom: 0;
    left: $theme-menu-width-sm;
    min-width: 100%;
  }
}

@include breakpoint(md) {
  .menu-md {
    left: 0;
    width: $theme-menu-width;
  }

  .sidebar-wrap {
    @extend .menu-md;

    .sidebar {
      // 20px for scroll
      width: $theme-menu-width + 20px;

      .header,
      .toctree {
        width: $theme-menu-width;
      }
    }
  }

  .addons-wrap {
    @extend .menu-md;
  }

  .content-wrap {
    margin-left: $theme-menu-width;

    &.shift {
      position: relative;
      left: 0;
      min-width: 0;
    }
  }
}

@include breakpoint(xl) {
  .content-wrap {
    max-width: $width-xl - $theme-menu-width;
  }
}
